<div class="main">
  <form action="javascript: void(0)">

    <mat-form-field>
      <input matInput placeholder="System" name="system"
        [matAutocomplete]="auto"
        [formControl]="systemInputCtrl"
        [(ngModel)]="chartOpt.system">
    </mat-form-field>
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let system of filteredSystems" [value]="system">
        {{ system }}
      </mat-option>
    </mat-autocomplete>

    <mat-form-field>
      <input matInput placeholder="Begin" name="begin"
        [matDatepicker]="beginDatepicker"
        [value]="chartOpt.begin"
        (dateChange)="beginDateChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="beginDatepicker"></mat-datepicker-toggle>
      <mat-datepicker #beginDatepicker [startAt]="chartOpt.begin"></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="End" name="end"
        [matDatepicker]="endDatepicker"
        [value]="chartOpt.end"
        (dateChange)="endDateChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="endDatepicker"></mat-datepicker-toggle>
      <mat-datepicker #endDatepicker [startAt]="chartOpt.end"></mat-datepicker>
    </mat-form-field>

    <button mat-raised-button (click)="go()" [disabled]="chartOpt.system.trim().length == 0">GO</button>

  </form>

  <div class="chart">
    <ow-chart-rq-t #chart [data]="chartData" *ngIf="chartState === 'shown'"></ow-chart-rq-t>
    <div *ngIf="chartState === null">
      Select system &amp; time
    </div>
    <div *ngIf="chartState === 'loading'">
      <mat-spinner></mat-spinner>
    </div>
    <div *ngIf="chartState === 'noData'">
      No Data
    </div>
  </div>

  <div class="failure-log">
    <h1>Failure Log</h1>
    <div class="table-wrapper">
      <table *ngIf="failureLogs.length > 0">
        <thead>
          <tr>
            <th>Time</th>
            <th>Status</th>
            <th>Host</th>
            <th>URL</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let logItem of failureLogs">
            <td class="time">{{ logItem.time | timestamp: 'time' }}</td>
            <td class="status">{{ logItem.status }}</td>
            <td>{{ logItem.host }}</td>
            <td>{{ logItem.url }}</td>
          </tr>
        </tbody>
      </table>
      <span *ngIf="failureLogs.length === 0">No Data</span>
    </div>
  </div>
</div>
